<template>
    <a-modal v-bind="defaultModalProps"
        v-model:open="open"
        :width="662"
        :body-style="{paddingInline: '8px', paddingBlock: '24px'}"
        :title="isUpdate ? '编辑问答' : '添加问答'"
        @cancel="handleCancel()"
        @ok="handleConfirm()"
    >
        <div class="box-border" v-if="currentEntry">
            <div class="flex flex-row items-center gap-3 mb-5">
                <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                    常见问题
                </label>
                <a-input v-model:value="currentEntry.question" placeholder="请输入问题名称" size="large" :disabled="isUpdate" />
            </div>
            <!-- 工作时间回答 -->
            <section class="flex flex-col gap-5 mb-5" v-if="currentEntry.scene === EnumScene.工作时间">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap mt-2">
                        休息制度
                    </label>
                    <a-space :size="8" wrap>
                        <div class="flex flex-row justify-center items-center w-25 h-10 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.restMode === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in workTimeOptions"
                            :key="item.value"
                            @click="currentEntry.ui.restMode = item.value"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap mt-2">
                        工作时间
                    </label>
                    <a-space :size="8" align="center">
                        <TimePicker v-model:value="currentEntry.ui.workStart" format="HH:mm" style="width: 160px;">
                            <template #suffixIcon>
                                <GpFontIcon name="icon-rili" />
                            </template>
                        </TimePicker>
                        <span class="text-primary text-sm">~</span>
                        <TimePicker v-model:value="currentEntry.ui.workEnd" format="HH:mm" style="width: 160px;">
                            <template #suffixIcon>
                                <GpFontIcon name="icon-rili" />
                            </template>
                        </TimePicker>
                    </a-space>
                </div>
            </section>
            <!-- 加班回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.加班">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap mt-2">
                        休息制度
                    </label>
                    <a-space :size="8" wrap>
                        <div class="flex flex-row justify-center items-center w-25 h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.restMode === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in workContinueOptions"
                            :key="item.value"
                            @click="currentEntry.ui.restMode = item.value"
                        >
                            {{item.label}}
                        </div>
                    </a-space>
                </div>
            </section>
            <!-- 公司地址回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.工作地点">
                <div class="flex flex-row items-center gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                        工作地址
                    </label>
                    <a-select v-model:value="currentEntry.ui.place" :options="addressListOptions" placeholder="请选择工作地址" size="large" style="width: 320px;" />
                </div>
            </section>
            <!-- 薪资回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.薪酬">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap mt-2">
                        薪资结构
                    </label>
                    <a-space :size="8" wrap>
                        <div class="flex flex-row justify-center items-center w-[140px] h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.composition === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in salaryOptions"
                            :key="item.value"
                            @click="currentEntry.ui.composition = item.value"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
                <a-flex justify="space-between" align="center">
                    <div class="flex flex-row items-center gap-3" v-if="currentEntry.ui.composition === EnumMemberSalaryType.固定薪资">
                        <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                            固定薪资
                        </label>
                        <InputNumber v-model:value="currentEntry.ui.salary" :min="0" placeholder="请输入固定薪资" size="large" style="width: 140px;" />
                    </div>
                    <template v-else>
                        <div class="flex flex-row items-center gap-3">
                            <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                                最低底薪
                            </label>
                            <InputNumber v-model:value="currentEntry.ui.salaryMin" :min="0" placeholder="请输入最低底薪" size="large" style="width: 140px;" />
                        </div>
                        <div class="flex flex-row items-center gap-3">
                            <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                                一般收入
                            </label>
                            <InputNumber v-model:value="currentEntry.ui.salary" :min="0" placeholder="请输入一般收入" size="large" style="width: 140px;" />
                        </div>
                    </template>
                </a-flex>
            </section>
            <!-- 试用期回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.试用期">
                <div class="flex flex-row items-center gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                        试用期时长
                    </label>
                    <InputNumber v-model:value="currentEntry.ui.duration" :min="0" :max="12" placeholder="请输入时长(0~12)" size="large" style="width: 140px;" />
                    <span class="text-sm text-secondary whitespace-nowrap">个月</span>
                </div>
                <div class="flex flex-row items-center gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                        试用期底薪
                    </label>
                    <InputNumber v-model:value="currentEntry.ui.salaryMin" :min="0" placeholder="请输入底薪" size="large" style="width: 140px;" />
                    <span class="text-sm text-secondary whitespace-nowrap">元/月</span>
                </div>
            </section>
            <!-- 福利回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.福利">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none mt-2">
                        {{ currentEntry.nameByCompany ?? '请选择' }}
                    </label>
                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.chooses.includes(item.value) ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in currentEntry.extendOptionsNormalized"
                            :key="item.value"
                            @click="handleSelectMultiple(currentEntry,item.value)"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
            </section>
            <!-- 出差回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.出差">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none mt-2">
                        {{ currentEntry.nameByCompany ?? '请选择' }}
                    </label>
                    <a-space :size="8" v-if="currentEntry.extendOptionsNormalized" wrap>
                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.choose === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in currentEntry.extendOptionsNormalized"
                            :key="item.value"
                            @click="currentEntry.ui.choose = item.value"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
            </section>
            <!-- 单选回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.扩展 && currentEntry.extendType === EnumKnowledgeExtendType.单选">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none mt-2">
                        {{ currentEntry.nameByCompany ?? '请选择' }}
                    </label>
                    <a-space :size="8" v-if="currentEntry.extendOptionsNormalized" wrap>
                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.choose === item.value ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in currentEntry.extendOptionsNormalized"
                            :key="item.value"
                            @click="currentEntry.ui.choose = item.value"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
            </section>
            <!-- 多选回答 -->
            <section class="flex flex-col gap-5 mb-5" v-else-if="currentEntry.scene === EnumScene.扩展 && currentEntry.extendType === EnumKnowledgeExtendType.多选">
                <div class="flex flex-row items-start gap-3">
                    <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none mt-2">
                        {{ currentEntry.nameByCompany ?? '请选择' }}
                    </label>
                    <a-space :size="12" v-if="currentEntry.extendOptionsNormalized" wrap>
                        <div class="flex flex-row justify-center items-center min-w-25 px-5 box-content h-9 bg-white border border-solid border-[#CED4DB] rounded-md text-sm text-third touchable-opacity hover:text-theme"
                            :class="currentEntry.ui.chooses.includes(item.value) ? '!border-theme !text-theme !bg-theme/4' : ''"
                            v-for="item in currentEntry.extendOptionsNormalized"
                            :key="item.value"
                            @click="handleSelectMultiple(currentEntry,item.value)"
                        >
                            {{ item.label }}
                        </div>
                    </a-space>
                </div>
            </section>
            <div class="flex flex-row gap-3">
                <label class="text-sm text-secondary font-normal text-right w-[86px] flex-none whitespace-nowrap">
                    示例回复
                </label>
                <a-textarea v-model:value="currentEntry.ui.reply" placeholder="请输入示例回复" :rows="5" />
            </div>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { TimePicker, InputNumber, message } from 'ant-design-vue';
import { defaultModalProps } from '@/constants/comp-setting';
import type { Exposed } from './types';
import type { EntryType } from '../../../start-add/types';
import { createEntry, handleSelectMultiple, salaryOptions, validateEntry, workContinueOptions, workTimeOptions } from '../../../start-add/helper';
import { EnumKnowledgeExtendType, EnumMemberSalaryType, EnumScene, type KnowledgeDetailResult } from '@/api/siderBar/model';
import { getJobGetjobaddresss } from '@/api/siderBar/job';
import { useAppStore } from '@/stores';
import { postKnowledgeKnowledgedetailaddKnowledgeId, putKnowledgeKnowledgedetaileditId } from '@/api/siderBar/knowledge';
defineOptions({
    name: 'KnowItemActionModal',
    inheritAttrs: false
})
const emit = defineEmits<{
    success: []
}>()
defineExpose<Exposed>({
    open(_knowId, item) {
        knowId.value = _knowId
        currentEntry.value = item ? createEntry(item, /**unusable in this case*/0) : createCustomEntry()
        isUpdate.value = Boolean(item)
        open.value = true
    },
})
const appStore = useAppStore()
const open = ref(false)
const isUpdate = ref(false)
const knowId = ref<INullable<number>>(null)
const currentEntry = ref<INullable<EntryType>>(null)
function createCustomEntry() {
    return createEntry(<KnowledgeDetailResult>{
        scene: EnumScene.扩展,
        extendType: EnumKnowledgeExtendType.无,
        question: "",
        answer: ""
    }, /**unusable in this case*/0)
}
const { data: addressList } = useRequest(() => getJobGetjobaddresss(), {
    initialData: []
})
const addressListOptions = computed(() => {
    return addressList.value!.map(l => {
        return {
            value: l.id,
            label: `${l.regionName}${l.address}`
        }
    })
})
function handleCancel() {
    open.value = false
    currentEntry.value = null
    isUpdate.value = false
    knowId.value = null
}
async function handleConfirm() {
    if (!currentEntry.value) return
    const params = validateEntry(currentEntry.value)
    if (!params) return
    try {
        appStore.toggleLoading(true)
        await isUpdate.value ? putKnowledgeKnowledgedetaileditId(currentEntry.value.id, params) : postKnowledgeKnowledgedetailaddKnowledgeId(toValue(knowId)!, params)
        appStore.toggleLoading(false)
        message.success('保存成功')
        handleCancel()
        emit('success')
    } catch (error) {
        appStore.toggleLoading(false)
    }
}
</script>